<!DOCTYPE html>
<html>
<head>
<title>Diagrama de Cargas Eléctricas</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="500"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Configuración de Estilo ---
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';
ctx.lineWidth = 1.5;
ctx.font = 'italic 20px Times New Roman';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

// --- Parámetros Geométricos ---
const centerX = 250;
const centerY = 250;
const halfDiagonal = 140; // Representa la distancia 'r' en el diagrama
const displacementX = 40;  // Representa la distancia 'x' en el diagrama

// --- Coordenadas de los Vértices y Cargas ---
const topVertex = { x: centerX, y: centerY - halfDiagonal };
const rightVertex = { x: centerX + halfDiagonal, y: centerY };
const bottomVertex = { x: centerX, y: centerY + halfDiagonal };
const leftVertex = { x: centerX - halfDiagonal, y: centerY };

// Posición de la carga 'q' desplazada
const qPosition = { x: centerX + displacementX, y: centerY };

// --- Proceso de Dibujo ---

// 1. Dibujar el cuadrado (líneas continuas)
ctx.beginPath();
ctx.moveTo(topVertex.x, topVertex.y);
ctx.lineTo(rightVertex.x, rightVertex.y);
ctx.lineTo(bottomVertex.x, bottomVertex.y);
ctx.lineTo(leftVertex.x, leftVertex.y);
ctx.closePath();
ctx.stroke();

// 2. Dibujar las líneas internas (discontinuas)
ctx.setLineDash([6, 4]);

// Diagonales
ctx.beginPath();
ctx.moveTo(topVertex.x, topVertex.y);
ctx.lineTo(bottomVertex.x, bottomVertex.y);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(leftVertex.x, leftVertex.y);
ctx.lineTo(rightVertex.x, rightVertex.y);
ctx.stroke();

// Líneas desde los vértices a la carga 'q'
ctx.beginPath();
ctx.moveTo(topVertex.x, topVertex.y);
ctx.lineTo(qPosition.x, qPosition.y);
ctx.stroke();

ctx.beginPath();
ctx.moveTo(bottomVertex.x, bottomVertex.y);
ctx.lineTo(qPosition.x, qPosition.y);
ctx.stroke();

// Restablecer a líneas continuas para arcos y texto
ctx.setLineDash([]);

// 3. Dibujar el arco del ángulo φ
ctx.beginPath();
const arcRadius = 35;
// El ángulo inicial es PI/2 (hacia abajo en coordenadas de canvas)
const startAngle = Math.PI / 2;
// El ángulo final se calcula por la posición de la carga q
const endAngle = Math.atan2(qPosition.y - topVertex.y, qPosition.x - topVertex.x);
ctx.arc(topVertex.x, topVertex.y, arcRadius, startAngle, endAngle);
ctx.stroke();

// 4. Añadir las etiquetas de texto
// Etiquetas de las cargas
ctx.fillText('Q', topVertex.x, topVertex.y - 15);
ctx.fillText('Q', rightVertex.x + 15, rightVertex.y);
ctx.fillText('Q', bottomVertex.x, bottomVertex.y + 15);
ctx.fillText('Q', leftVertex.x - 15, leftVertex.y);
ctx.fillText('q', qPosition.x + 12, qPosition.y - 12);

// Etiqueta del centro
ctx.fillText('O', centerX - 12, centerY - 8);

// Etiquetas de las variables
ctx.fillText('a', (topVertex.x + leftVertex.x) / 2 - 15, (topVertex.y + leftVertex.y) / 2 - 15);
ctx.fillText('r', topVertex.x - 15, centerY - halfDiagonal / 2);
ctx.fillText('x', centerX + displacementX / 2, centerY + 18);
ctx.fillText('φ', topVertex.x + 20, topVertex.y + 40);

// 5. Añadir la leyenda de la figura
ctx.font = '20px SimHei'; // Fuente estándar para la leyenda
ctx.fillText('电图 1.2.1', centerX, 470);

</script>

</body>
</html>